<template>
  <div>
     <video id="example_video_1" class="video-js vjs-default-skin" controls preload="none" width="640" height="264"
         poster="http://vjs.zencdn.net/v/oceans.png">
    <source src="http://vjs.zencdn.net/v/oceans.mp4" type="video/mp4">
  </video>
  </div>
</template>
<script>
import "video.js/dist/video-js.css";
import videojs from "video.js";
export default {
    data(){
        return{
            myPlayer: '' // 视频播放器实例
        }
    },
    mounted(){
        const videoUrl = 'http://vjs.zencdn.net/v/oceans.mp4'
        const myPlayerOptions = {
            bigPlayButton: true, // 是否显示播放按钮（这个播放按钮默认会再左上方，需用CSS设置居中）
            textTrackDisplay: true,
            posterImage: true,
            errorDisplay: true,
            controlBar: true,
            autoplay:false, // 不设置自动播放，若未true，则没法看到视频海报图片
            controls: true,
        }
        // 此处等待UI渲染进程结束，再执行js逻辑线程
        setTimeout(() => {
            this.myPlayer = videojs('my-video', myPlayerOptions)
            this.player.src(this.brandDetail.vedioUrl)
            this.player.load(this.brandDetail.vedioUrl) 
        }, 500)
        videojs.addLanguage('zh-CN', {
            "You aborted the media playback": "视频播放被终止",
            "A network error caused the media download to fail part-way.": "网络错误导致视频下载中途失败。",
            "The media could not be loaded, either because the server or network failed or because the format is not supported.": "视频因格式不支持或者服务器或网络的问题无法加载。",
            "The media playback was aborted due to a corruption problem or because the media used features your browser did not support.": "由于视频文件损坏或是该视频使用了你的浏览器不支持的功能，播放终止。",
            "No compatible source was found for this media.": "无法找到此视频兼容的源。",
        });
    },
    destroyde () {   
        this.myPlayer.dispose()
    }
};
</script>
<style lang="less" scoped>
// 居中播放按钮
.vjs-big-play-button{
	left:50% !important;
	top: 50% !important;
	margin-top: -1em ;
	margin-left: -1.5em ;
}
//设置简洁播放按钮
.video-js .vjs-big-play-button { 
  border:unset!important;
  background-color:unset!important;
}
.video-js .vjs-big-play-button .vjs-icon-placeholder:before {   
  font-size: 45px;
}
//设置海报占据整个视频空间
.vjs-poster {  
  background-size: 100% 100%!important;
}
</style>